<template>
	<view>
		<!-- 上传照片 -->
		<view class="shareImage" v-if="typeId == 2&&shareImage != ''||typeId == 2&&taskAppendix != ''">
			<view class="borde6451">
			</view>
			<view style="height: 60upx;">
			</view>
			<button :style="disabled?'background:#ccc!important':''" :disabled="disabled" v-if="shareImage != ''&&taskAppendix==''" class="accomplish actaveBtn" type="default"
				@tap="userTaskStep(taskStepId,'')">点击完成任务</button>
			<!-- <view v-if="shareImage||taskAppendix" class="ShareFood-xj-image" @tap="camera">
			</view> -->
			<image :src="shareImage||taskAppendix" mode="widthFix" style="width: 100%;height: 100%;position:relative;">
			</image>
			<view class="accomplish-popup" v-show="addBean||addBean2">
				完成任务 <image class="jkdimage"
					src="http://static.bsyjk.cn/fitness/37914A67E286429B99EF67FDE1D3F192.png" mode="健康豆"></image>
				+{{bean}}
			</view>
		</view>
		<!-- 相机 -->
		<view v-if="typeId == 2&&shareImage == ''&&taskAppendix==''" style="padding-bottom: 80upx;">
			<view class="borde6451">
			</view>

			<view class="ShareFood" @tap="camera">
				<view class="ShareFood-xj">
				</view>
				<view class="ShareFood-text">
					来分享下你今天的饮食吧
				</view>
			</view>
			<button :disabled="true" class="accomplish" style="background: rgba(226, 225, 226, 1);" type="default"
				@tap="userTaskStep(taskStepId,'')">点击完成任务</button>
		</view>
		<!--  -->
		<view v-if="typeId != 2">
			<button :disabled="disabled" v-if="code == '完成任务'&&typeId == 8||code == '完成任务'&&typeId == 1"
				class="accomplish" :class="true?'actaveBtn':''" type="default"
				@tap="userTaskStep(taskStepId,'')">点击完成任务</button>
			<view class="accomplish-popup" v-show="addBean||addBean2">
				完成任务 <image class="jkdimage"
					src="http://static.bsyjk.cn/fitness/37914A67E286429B99EF67FDE1D3F192.png" mode="健康豆"></image>
				+{{bean}}
			</view>
			<view class="schedule" v-show="code !=''&&code!='完成任务'">
				<view class="title">
					任务说明
				</view>
				<view class="score-view">
					<u-line-progress height="10" active-color="#F8E71C" :show-percent="false" :percent="100 -code*7">
					</u-line-progress>
				</view>
				<view class="countdown">
					<text v-if="code != '完成任务'">
						阅读{{code}}s后
						即可完成任务
					</text>
					<text v-else>
						{{code}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function yzmtime(that) {
		var time = 15;
		let code = that.code;
		let datatime = that.time;
		that.code = '15';
		that.Interval = setInterval(function() {
			console.log(time)
			time--;
			if (time > 0) {
				that.code = time
			} else {
				clearInterval(that.Interval);
				that.code = '完成任务';
				if (that.typeId != 8 && that.typeId != 1 && that.typeId != 2) { //需要显示手动完成任务
					that.userTaskStep(that.taskStepId, '')
				}
			}
		}, 1000)
		// }
	};
	import uLineProgress from "@/uview-ui/components/u-line-progress/u-line-progress.vue"
	export default {
		components: {
			uLineProgress
		},
		props: {
			codea: {
				type: Number,
				default: 0
			},
			taskAppendix: {
				type: String,
				default: ''
			},
			upPage: {
				type: String,
				default: ''
			},
			addBean: false,
			bean: {
				type: Number,
				default: 0
			},
			taskStepId: {
				type: String,
				default: ''
			},
			typeId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				shareImage: '', //上传的图片
				disabled: false, //按钮禁用
				addBean2: false,
				code: 15,
			};
		},
		// 停留页面执行任务
		created() {
			let _this = this;
			uni.setStorageSync('taskTime', true)
			yzmtime(_this)
			// this.shareImage = 'http://pic.yolzzz.com/normal/1C8444252FC0473C949728950095BF02.jpeg'
		},
		// 关闭页面
		destroyed() {
			if (this.Interval) {
				clearInterval(this.Interval);
				this.Interval = null
			}
		},
		methods: {

			// 相机
			camera() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: global.host+'cms-service/file',
							filePath: imageSrc,
							fileType: 'image',
							name: 'upfile',
							header: {
								'Authorization': uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'),
								userSource: 1, //用户类型 1:C端用户  2:员工
							},
							success: (resdata) => {
								let shareImage = JSON.parse(resdata.data).result.url; //分享image
								_this.shareImage = shareImage;
								// _this.userTaskStep(_this.taskStepId, shareImage)
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
							}
						});
					}
				});
			},
			// 用户完成一个小目标
			userTaskStep(taskStepId, taskAppendix) {
				let userInfoKey = global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z';
				let _this = this;
				_this.disabled = true;
				let fdata = {
					userId: uni.getStorageSync(userInfoKey).userId,
					userStepId: taskStepId,
					taskAppendix: _this.shareImage
				}
				this.$api.put(global.apiUrls.userTaskStep, fdata).then(res => {
					if (res.data.code == 1000) {
						_this.addBean2 = true; //显示添加健康豆
						setTimeout(() => {
							_this.addBean2 = false;
							_this.code = ''
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
						_this.disabled = false;
					}
				}).catch(err => {
					_this.disabled = false;
				})
			},
		}
	}
</script>

<style lang="scss">
	.borde6451 {
		height: 1px;
		background: rgba(238, 238, 238, 1);
		margin: 60upx auto 0;
	}

	.shareImage {
		width: 654upx;
		margin: 40upx auto;
		position: relative;
	}

	.actaveBtn {
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat !important;
		background-size: 655upx 175upx;
		position: fixed;
		bottom: 80upx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9;
	}

	.accomplish {
		width: 655upx;
		height: 90upx;
		font-size: 34upx;
		font-weight: 400;
		color: #FFFFFF !important;
		line-height: 90upx;
		margin: 80upx auto 0;
		border-radius: 50upx;
		background: #E2E1E2;
	}

	.schedule {
		width: 154upx;
		height: 173upx;
		background: url(http://static.bsyjk.cn/popupfebg/02387D665D884D0785CD9C55D0221BC6.png)no-repeat;
		background-size: 154upx 173upx;
		position: fixed;
		top: 70vh;
		right: 0;
		text-align: center;
		color: #F5A623;
		z-index: 3;

		.score-view {
			width: 76upx;
			height: 46upx;
			margin: 0 auto;
		}

		.title {
			font-size: 18upx;
			font-weight: 500;
			line-height: 25upx;
			color: #FAD961;
			padding-top: 40upx;
		}

		.countdown {
			font-size: 18upx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 23upx;
		}
	}

	.ShareFood-xj {
		width: 123upx;
		height: 123upx;
		margin: 93upx auto 30upx;
		background: url(http://static.bsyjk.cn/shareImage/1A239023D2E34FF2879B24AD10EDC813.png)no-repeat;
		background-size: 123upx 123upx;
	}

	.ShareFood-text {
		text-align: center;
		color: #2EA7E0;
	}

	.accomplish-popup {
		display: inline-block;
		width: 345upx;
		height: 90upx;
		background: #3A3A3A;
		border-radius: 15upx;
		opacity: 0.9;
		position: fixed;
		top: 50vh;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90upx;
		letter-spacing: 1px;
		text-align: center;

		.jkdimage {
			width: 44upx;
			height: 36upx;
		}
	}

	.ShareFood-xj-image {
		width: 80upx;
		height: 80upx;
		position: absolute;
		top: 20upx;
		right: -40upx;
		z-index: 9;
		background: url(http://static.bsyjk.cn/shareImage/1A239023D2E34FF2879B24AD10EDC813.png)no-repeat;
		background-size: 80upx 80upx;
	}
</style>
